@namespace FluentCMS.Web.UI

@if (ViewState.Page.HasAdminAccess && !ViewState.Page.Locked && ViewState.Type == ViewStateType.PagePreview)
{
    <div class="f-plugin-container-actions">
        <div class="f-plugin-toolbar-dropdown">
            <div class="f-plugin-toolbar-dropdown-toggler f-plugin-toolbar-action">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 17h14M5 12h14M5 7h14" /></svg>
            </div>
            <div class="f-plugin-toolbar-dropdown-menu">
                <button @onclick="OpenSettingsModal" class="f-plugin-toolbar-dropdown-item">
                    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.32 1.8C7.34204 1.58074 7.44473 1.37749 7.60815 1.22967C7.77158 1.08185 7.98408 0.999997 8.20444 1H9.79556C10.0159 0.999997 10.2284 1.08185 10.3918 1.22967C10.5553 1.37749 10.658 1.58074 10.68 1.8L10.7093 2.096C11.4011 2.26661 12.0631 2.54082 12.6729 2.90933L12.9031 2.72089C13.0737 2.5814 13.29 2.51026 13.5101 2.52127C13.7302 2.53227 13.9384 2.62464 14.0942 2.78044L15.2196 3.90578C15.3754 4.06162 15.4677 4.26977 15.4787 4.48986C15.4897 4.70995 15.4186 4.92629 15.2791 5.09689L15.0907 5.328C15.4542 5.92889 15.7307 6.58933 15.904 7.29067L16.1991 7.32C16.4185 7.34183 16.622 7.44443 16.77 7.60788C16.918 7.77132 17 7.98394 17 8.20444V9.79556C17 10.0159 16.9182 10.2284 16.7703 10.3918C16.6225 10.5553 16.4193 10.658 16.2 10.68L15.904 10.7093C15.7334 11.4011 15.4592 12.0631 15.0907 12.6729L15.2791 12.9031C15.4186 13.0737 15.4897 13.29 15.4787 13.5101C15.4677 13.7302 15.3754 13.9384 15.2196 14.0942L14.0942 15.2196C13.9384 15.3754 13.7302 15.4677 13.5101 15.4787C13.29 15.4897 13.0737 15.4186 12.9031 15.2791L12.672 15.0907C12.0625 15.4592 11.4008 15.7334 10.7093 15.904L10.68 16.1991C10.6582 16.4185 10.5556 16.622 10.3921 16.77C10.2287 16.918 10.0161 17 9.79556 17H8.20444C7.98408 17 7.77158 16.9182 7.60815 16.7703C7.44473 16.6225 7.34204 16.4193 7.32 16.2L7.29067 15.904C6.59889 15.7334 5.93688 15.4592 5.32711 15.0907L5.09689 15.2791C4.92629 15.4186 4.70995 15.4897 4.48986 15.4787C4.26977 15.4677 4.06162 15.3754 3.90578 15.2196L2.78044 14.0933C2.62464 13.9375 2.53227 13.7293 2.52127 13.5092C2.51026 13.2892 2.5814 13.0728 2.72089 12.9022L2.90933 12.6711C2.5409 12.0616 2.2667 11.3999 2.096 10.7084L1.8 10.68C1.58074 10.658 1.37749 10.5553 1.22967 10.3918C1.08185 10.2284 0.999997 10.0159 1 9.79556V8.20444C0.999997 7.98408 1.08185 7.77158 1.22967 7.60815C1.37749 7.44473 1.58074 7.34204 1.8 7.32L2.096 7.29067C2.26661 6.5989 2.54082 5.9369 2.90933 5.32711L2.72089 5.09689C2.5814 4.92629 2.51026 4.70995 2.52127 4.48986C2.53227 4.26977 2.62464 4.06162 2.78044 3.90578L3.90667 2.78044C4.0625 2.62464 4.27066 2.53227 4.49075 2.52127C4.71084 2.51026 4.92718 2.5814 5.09778 2.72089L5.32889 2.90933C5.93837 2.54083 6.60007 2.26662 7.29156 2.096L7.32 1.8Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="1" stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M9 6.5C10.3807 6.5 11.5 7.61929 11.5 9C11.5 10.3807 10.3807 11.5 9 11.5C7.61929 11.5 6.5 10.3807 6.5 9C6.5 7.61929 7.61929 6.5 9 6.5Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="1" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    Settings
                </button>
                @if (Plugin.Definition.Types.Where(x => x.Name == "Edit").FirstOrDefault() != null)
                {
                    <button @onclick='OpenEditModal' class="f-plugin-toolbar-dropdown-item">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path transform="translate(4, -1)" fill-rule="evenodd" clip-rule="evenodd" d="M12.3409 2.5698C12.418 2.68687 12.4524 2.82698 12.4382 2.96646C12.424 3.10594 12.3621 3.23625 12.2629 3.33538L4.79953 10.798C4.72318 10.8743 4.62791 10.9289 4.5235 10.9563L1.4149 11.7681C1.31214 11.7949 1.20417 11.7944 1.10168 11.7666C0.999198 11.7387 0.905775 11.6846 0.830684 11.6095C0.755594 11.5344 0.701447 11.441 0.67362 11.3385C0.645793 11.236 0.645253 11.128 0.672053 11.0253L1.48391 7.91749C1.50761 7.8242 1.55232 7.73756 1.61462 7.66419L9.10561 0.178072C9.21977 0.064047 9.37453 0 9.53589 0C9.69725 0 9.85201 0.064047 9.96617 0.178072L12.2629 2.474C12.292 2.50323 12.3182 2.53533 12.3409 2.5698ZM10.9713 2.90428L9.53589 1.46973L2.62051 8.38512L2.1131 10.3279L4.05587 9.82048L10.9713 2.90428Z" fill="currentColor" />
                            <path d="M13.8689 12.1044C14.0908 10.2079 14.1616 8.29673 14.0808 6.38897C14.079 6.34402 14.0865 6.2992 14.1029 6.25729C14.1192 6.21539 14.144 6.1773 14.1758 6.14541L14.9746 5.34655C14.9965 5.32459 15.0242 5.30941 15.0544 5.30282C15.0847 5.29624 15.1162 5.29853 15.1452 5.30942C15.1741 5.32031 15.1994 5.33933 15.2178 5.36421C15.2362 5.38909 15.2471 5.41876 15.249 5.44965C15.3994 7.71573 15.3423 9.99081 15.0785 12.2465C14.887 13.8881 13.5685 15.1749 11.9342 15.3575C9.09708 15.6717 6.23391 15.6717 3.39676 15.3575C1.76331 15.1749 0.444044 13.8881 0.252447 12.2465C-0.0841489 9.36882 -0.0841489 6.4617 0.252447 3.58401C0.444044 1.94244 1.7625 0.655648 3.39676 0.47298C5.5501 0.234199 7.71967 0.176355 9.88267 0.300055C9.91363 0.302278 9.9433 0.313325 9.96817 0.33189C9.99304 0.350454 10.0121 0.375756 10.023 0.404801C10.0339 0.433846 10.0363 0.465416 10.0299 0.495773C10.0234 0.52613 10.0084 0.554001 9.98659 0.576086L9.18042 1.38145C9.14884 1.4129 9.11116 1.43756 9.06969 1.4539C9.02822 1.47024 8.98385 1.4779 8.9393 1.47643C7.13435 1.41508 5.32732 1.48427 3.53234 1.68346C3.00784 1.74151 2.51821 1.97469 2.14257 2.34532C1.76693 2.71596 1.5272 3.2024 1.46211 3.72608C1.1366 6.50938 1.1366 9.32113 1.46211 12.1044C1.5272 12.6281 1.76693 13.1146 2.14257 13.4852C2.51821 13.8558 3.00784 14.089 3.53234 14.1471C6.25612 14.4515 9.07488 14.4515 11.7995 14.1471C12.324 14.089 12.8136 13.8558 13.1892 13.4852C13.5649 13.1146 13.8038 12.6281 13.8689 12.1044Z" fill="currentColor" />
                        </svg>
                        Edit
                    </button>
                }
                @if (Plugin.Definition.Types.Where(x => x.Name == "Data").FirstOrDefault() != null)
                {
                    <button @onclick='OpenDataModal' class="f-plugin-toolbar-dropdown-item">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path transform="translate(4, -1)" fill-rule="evenodd" clip-rule="evenodd" d="M12.3409 2.5698C12.418 2.68687 12.4524 2.82698 12.4382 2.96646C12.424 3.10594 12.3621 3.23625 12.2629 3.33538L4.79953 10.798C4.72318 10.8743 4.62791 10.9289 4.5235 10.9563L1.4149 11.7681C1.31214 11.7949 1.20417 11.7944 1.10168 11.7666C0.999198 11.7387 0.905775 11.6846 0.830684 11.6095C0.755594 11.5344 0.701447 11.441 0.67362 11.3385C0.645793 11.236 0.645253 11.128 0.672053 11.0253L1.48391 7.91749C1.50761 7.8242 1.55232 7.73756 1.61462 7.66419L9.10561 0.178072C9.21977 0.064047 9.37453 0 9.53589 0C9.69725 0 9.85201 0.064047 9.96617 0.178072L12.2629 2.474C12.292 2.50323 12.3182 2.53533 12.3409 2.5698ZM10.9713 2.90428L9.53589 1.46973L2.62051 8.38512L2.1131 10.3279L4.05587 9.82048L10.9713 2.90428Z" fill="currentColor" />
                            <path d="M13.8689 12.1044C14.0908 10.2079 14.1616 8.29673 14.0808 6.38897C14.079 6.34402 14.0865 6.2992 14.1029 6.25729C14.1192 6.21539 14.144 6.1773 14.1758 6.14541L14.9746 5.34655C14.9965 5.32459 15.0242 5.30941 15.0544 5.30282C15.0847 5.29624 15.1162 5.29853 15.1452 5.30942C15.1741 5.32031 15.1994 5.33933 15.2178 5.36421C15.2362 5.38909 15.2471 5.41876 15.249 5.44965C15.3994 7.71573 15.3423 9.99081 15.0785 12.2465C14.887 13.8881 13.5685 15.1749 11.9342 15.3575C9.09708 15.6717 6.23391 15.6717 3.39676 15.3575C1.76331 15.1749 0.444044 13.8881 0.252447 12.2465C-0.0841489 9.36882 -0.0841489 6.4617 0.252447 3.58401C0.444044 1.94244 1.7625 0.655648 3.39676 0.47298C5.5501 0.234199 7.71967 0.176355 9.88267 0.300055C9.91363 0.302278 9.9433 0.313325 9.96817 0.33189C9.99304 0.350454 10.0121 0.375756 10.023 0.404801C10.0339 0.433846 10.0363 0.465416 10.0299 0.495773C10.0234 0.52613 10.0084 0.554001 9.98659 0.576086L9.18042 1.38145C9.14884 1.4129 9.11116 1.43756 9.06969 1.4539C9.02822 1.47024 8.98385 1.4779 8.9393 1.47643C7.13435 1.41508 5.32732 1.48427 3.53234 1.68346C3.00784 1.74151 2.51821 1.97469 2.14257 2.34532C1.76693 2.71596 1.5272 3.2024 1.46211 3.72608C1.1366 6.50938 1.1366 9.32113 1.46211 12.1044C1.5272 12.6281 1.76693 13.1146 2.14257 13.4852C2.51821 13.8558 3.00784 14.089 3.53234 14.1471C6.25612 14.4515 9.07488 14.4515 11.7995 14.1471C12.324 14.089 12.8136 13.8558 13.1892 13.4852C13.5649 13.1146 13.8038 12.6281 13.8689 12.1044Z" fill="currentColor" />
                        </svg>
                        Data
                    </button>
                }
                <button @onclick="OpenDeleteConfirm" class="f-plugin-toolbar-dropdown-item">
                    <svg width="16" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2.616 15.77C2.168 15.77 1.78667 15.6127 1.472 15.298C1.15733 14.9833 1 14.6023 1 14.155V1.77H0V0.77H4V0H10V0.77H14V1.77H13V14.155C13 14.615 12.846 14.9993 12.538 15.308C12.23 15.6167 11.8453 15.7707 11.384 15.77H2.616ZM12 1.77H2V14.155C2 14.3343 2.05767 14.4817 2.173 14.597C2.28833 14.7123 2.436 14.77 2.616 14.77H11.385C11.5383 14.77 11.6793 14.706 11.808 14.578C11.9367 14.45 12.0007 14.3087 12 14.154V1.77ZM4.808 12.77H5.808V3.77H4.808V12.77ZM8.192 12.77H9.192V3.77H8.192V12.77Z" fill="currentColor" />
                    </svg>
                    Delete
                </button>

            </div>
        </div>
        <button class="f-plugin-toolbar-action f-plugin-container-action-drag">
            <svg width="16" height="16" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17 9H1M17 9L14.3333 11.6667M17 9L14.3333 6.33333M1 9L3.66667 11.6667M1 9L3.66667 6.33333M9 1V17M9 1L6.33333 3.66667M9 1L11.6667 3.66667M9 17L6.33333 14.3333M9 17L11.6667 14.3333" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
        </button>
    </div>

    <Confirm Visible="DeleteConfirmModalOpen" OnCancel="OnConfirmClose" OnConfirm="@OnDeleteConfirm">
        Are you sure to remove this plugin from page?
    </Confirm>

    <EditForm Model="@SettingsModel" Name="PluginSettings" OnValidSubmit="OnSettingsSubmit">
        <DataAnnotationsValidator />

        <Modal Size="ModalSize.Large" Visible="SettingsModalOpen" OnClose="OnSettingsClose">
            <ModalHeader>Plugin Settings</ModalHeader>
            <ModalBody>
                <Grid GutterX="GridGutter.Large">
                    <FormInput Label="Class" Hint="Classes will be applied to wrapper of the plugin." @bind-Value="SettingsModel.Class" />
                    <FormTextarea Label="Style" Hint="Inline Styles will be applied to wrapper of the plugin. (writing selectors is not supported)" @bind-Value="SettingsModel.Style" />
                </Grid>
            </ModalBody>
            <ModalFooter>
                <Stack>
                    <Button @onclick="OnSettingsClose">Cancel</Button>
                    <Button Color="Color.Primary" Type="ButtonType.Submit">Submit</Button>
                </Stack>
            </ModalFooter>
        </Modal>

        @if (EditModalOpen)
        {
            <DynamicComponent Type='@GetPluginType("Edit")' Parameters="@GetEditParameters()"/>
        }
        @if (DataModalOpen)
        {
            <DynamicComponent Type='@GetPluginType("Data")' Parameters="@GetDataParameters()"/>
        }
    </EditForm>
}
